<template>
  <!-- 全部企业 -->
  <view class="conter">
    <cc-goback title='全部企业' color="#fff"></cc-goback>
    <view class="navigation_head"></view>
    <view class="ranking_frist">
      <view class="ranking_two ranking_word">
        排名
      </view>
      <view class="ranking_three ranking_word">
        企业名称
      </view>
      <view class="ranking_four ranking_word">
        <view class="word_a">
          厂界
        </view>
        <!-- <image src="../../static/home_page/shangla.png" mode=""></image> -->
      </view>
      <view class="ranking_five ranking_word">
        <view class="word_a">
          排口
        </view>
        <!-- <image src="../../static/home_page/xia.png" mode=""></image> -->
      </view>
      <view class="ranking_six ranking_word">
        工况
      </view>
      <view class="ranking_seven ranking_word">
        状态
      </view>
    </view>
    <!-- <navigator class="ranking_number" url="/pages/enterprise_information/enterprise_information">
      <view class="number_a number_style">
        1
      </view>
      <view class="number_b number_style">
        永利
      </view>
      <view class="number_c number_style">
        35
        <view class="number_cd">
          mg/m³
        </view>
      </view>
      <view class="number_d number_style">
        35
        <view class="number_cd">
          mg/m³
        </view>
      </view>
      <view class="number_e">
        <view class="number_ee">
          5
        </view>
        <view class="number_ee">
          3
        </view>
        <view class="number_ee">
          1
        </view>
      </view>
      <view class="number_f">
        正常
      </view>
    </navigator> -->
    <view class="ranking_number" v-for="(item,i) in all_enterprisesList" :key='i'>
      <view class="ranking_number" :class="i%2==0?'':'R_color'">
      <view v-if="i==0" class="number_a number_style_a">
        <view class="ranking_style">
          {{i+1}}
        </view>
      </view>
      <view v-if="i==1" class="number_a number_style_a">
        <view class="ranking_style_a">
          {{i+1}}
        </view>
      </view>
      <view v-if="i==2" class="number_a number_style_a">
        <view class="ranking_style_b">
          {{i+1}}
        </view>
      </view>
      <view v-if="i>2" class="number_a number_style_a">
        <view class="ranking_style_c">
          {{i+1}}
        </view>
      </view>
      <view class="number_b number_style">
        {{item.name}}
      </view>
      <view class="number_c number_style">
        {{item.map.hjgc05.value}}
        <view class="number_cd">
          {{item.map.hjgc05.unit}}
        </view>
      </view>
      <view class="number_d number_style">
        {{item.map.hjgc01.value}}
        <view class="number_cd">
          {{item.map.hjgc01.unit}}
        </view>
      </view>
      <view class="number_e">
        <view class="num_e">
          <view class="number_ee bgcolor_a" v-if="item.success!==0">
            {{item.success}}
          </view>
          <view class="number_ee bgcolor_b" v-if="item.warn!==0">
            {{item.warn}}
          </view>
          <view class="number_ee bgcolor_c" v-if="item.stop!==0">
            {{item.stop}}
          </view>
          <view class="number_ee bgcolor_d" v-if="item.error!==0">
            {{item.error}}
          </view>
        </view>
      </view>
      <view class="number_f num_color_a" v-if="item.state==0">
        {{item.stateName}}
      </view> <view class="number_f num_color_b" v-if="item.state==1">
        {{item.stateName}}
      </view> <view class="number_f num_color_c" v-if="item.state==2">
        {{item.stateName}}
      </view> <view class="number_f num_color_d" v-if="item.state==3">
        {{item.stateName}}
      </view>
       </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        all_enterprisesList: '',
      };
    },
    onLoad() {
      this.getAll_enterprises()
    },
    methods: {
      getAll_enterprises() {
        this.$http.get('/envirnment-air/app/homepage/enterpriseAnalysisMore', {}).then(res => {
          if (res.code == '00000') {
            this.all_enterprisesList = res.data.list
            console.log('全部企业', this.all_enterprisesList)
          }
        })
      }
    }
  }
</script>

<style lang="scss">
  page {
    background: #FFF;
  }

  .ranking_frist {
    width: 100%;
    height: 44rpx;
    background: #F2F2F2;
    display: flex;
    align-items: center;
    margin-top: 5rpx;
  }

  .navigation_head {
    height: calc(88rpx + var(--status-bar-height));
  }

  .ranking_two {
    width: 50rpx;
    text-align: center;
    margin-left: 20rpx;
  }

  .ranking_three {
    width: 150rpx;
    text-align: center;
    // margin-right: 59rpx;
  }

  .word_a {
    // margin-right: 11rpx;
  }

  .ranking_four {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 150rpx;
    // margin-right: 58rpx;

    image {
      width: 11rpx;
      height: 20rpx;
    }
  }

  .ranking_five {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 150rpx;
    // margin-right: 69rpx;

    image {
      width: 11rpx;
      height: 20rpx;
    }
  }

  .ranking_six {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 150rpx;
    // margin-right: 80rpx;
  }

  .ranking_seven {
    width: 50rpx;
    text-align: center;
    // margin-right: 27rpx;
  }

  .ranking_word {
    font-size: 24rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #999999;
  }

  .ranking_number {
    display: flex;
    align-items: center;
    width: 100%;
    height: 95rpx;
  }

  .number_style {
    font-size: 24rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #333333;
  }
  .number_style_a {
    font-size: 24rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #FFFFFF;
  }

  .number_a {
    width: 50rpx;
    text-align: center;
    margin-left: 20rpx;
  }

  .number_b {
    width: 150rpx;
    text-align: center;
    // margin-right: 63rpx;
  }

  .number_cd {
    font-size: 18rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #999999;
    margin: 6rpx 0 0 6rpx;
  }

  .number_c {
    display: flex;
    width: 150rpx;
    justify-content: center;
    // margin: 0 38rpx 0 10rpx;
  }

  .number_d {
    display: flex;
    width: 150rpx;
    justify-content: center;
    // margin-right: 26rpx;
  }

  .number_e {
    width: 150rpx;
    // margin: 0 47rpx 0 5rpx;
  }

  .num_e {
    display: flex;
    justify-content: center;
  }

  .number_ee {
    text-align: center;
    width: 30rpx;
    height: 32rpx;
    font-size: 24rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #FFFFFF !important;
    border-radius: 6rpx;
    margin-right: 12rpx;
  }

  .number_f {
    width: 50rpx;
    text-align: center;
    font-size: 24rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #3792FF;
    // margin-right: 27rpx;
  }

  .ranking_style {
    margin: 0 auto;
    width: 38rpx;
    height: 38rpx;
    line-height: 38rpx;
    background: url(../../static/ranking/1.png) no-repeat;
    background-size: 100% 100%;
  }

  .ranking_style_a {
    margin: 0 auto;
    width: 38rpx;
    height: 38rpx;
    line-height: 38rpx;
    background: url(../../static/ranking/2.png) no-repeat;
    background-size: 100% 100%;
  }

  .ranking_style_b {
    margin: 0 auto;
    width: 38rpx;
    height: 38rpx;
    line-height: 38rpx;
    background: url(../../static/ranking/3.png) no-repeat;
    background-size: 100% 100%;
  }

  .ranking_style_c {
    margin: 0 auto;
    width: 38rpx;
    height: 38rpx;
    line-height: 38rpx;
    background: url(../../static/ranking/4.png) no-repeat;
    background-size: 100% 100%;
  }
  .num_color_a{
    color: #94A5C7;
  }.num_color_b{
    color: #3792FF;
  }.num_color_c{
    color: #FFCE6C;
  }.num_color_d{
    color: #FF806C;
  }
  .R_color{
    background: rgba(148, 165, 199, 0.08);
    opacity: 1;
  }
  .bgcolor_a{
    background-color: #4EA1FF;
  }.bgcolor_b{
    background-color: #FF806C;
  }.bgcolor_c{
    background-color: #BFD5FF;
  }.bgcolor_d{
    background-color: #94A5C7;
  }
</style>
